<template>
  <div>
    <el-row><el-col :span="24"><el-card><el-row>
      <el-col :span="4"><el-select v-model="formInline.adType" placeholder="广告类型">
        <el-option label="全部类型" value="all"></el-option><el-option label="启动页广告" value="start-page"></el-option><el-option label="首页弹窗广告" value="popup"></el-option>
      </el-select></el-col>
      <el-col :span="4"><el-input v-model="formInline.adTitle" placeholder="广告标题"></el-input></el-col>
      <el-col :span="4"><el-select v-model="formInline.client" placeholder="客户端">
        <el-option label="全部客户端" value="all"></el-option><el-option label="外卖APP" value="takeout"></el-option><el-option label="商家APP" value="merchant"></el-option><el-option label="骑手APP" value="rider"></el-option>
      </el-select></el-col>
      <el-col :span="4"><el-select v-model="formInline.status" placeholder="状态">
        <el-option label="全部状态" value="all"></el-option><el-option label="待推送" value="pending"></el-option><el-option label="生效中" value="active"></el-option><el-option label="已过期" value="expired"></el-option><el-option label="已停用" value="disabled"></el-option>
      </el-select></el-col>
      <el-col :span="4"><el-date-picker v-model="creationTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker></el-col>
      <el-col :span="4"><el-button type="primary" icon="el-icon-search">搜索</el-button><el-button type="warning" icon="el-icon-refresh">重置</el-button></el-col>
    </el-row>
      <el-button type="primary" @click="toAdd()">发布广告</el-button>
      <el-table :data="ads" style="width: 100%">
        <el-table-column prop="id" label="编号"></el-table-column>
      <el-table-column prop="adType" label="广告类型"></el-table-column>
        <el-table-column prop="adTitle" label="广告标题"></el-table-column>
        <el-table-column prop="client" label="客户端"></el-table-column>
      <el-table-column prop="effectiveDateStart" label="生效日期"></el-table-column>
        <el-table-column prop="creationDate" label="创建时间"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status==1" type="success">待推送</el-tag>
            <el-tag v-if="scope.row.status==2" type="warning">生效中</el-tag>
            <el-tag v-if="scope.row.status==3" type="danger">已停用</el-tag>
          </template>
        </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" v-if="scope.row.status!=3&&scope.row.status==1" @click="toUpdate(scope.row.id)" size="mini">编辑广告</el-button>
          <el-button type="text" v-if="scope.row.status==1" @click="zhuangtai(scope.row.id,2)" size="mini">立即推送</el-button>
          <el-button type="text" v-if="scope.row.status==1" @click="zhuangtai(scope.row.id,3)" size="mini">停用广告</el-button>
          <el-button type="text" v-if="scope.row.status==2" @click="zhuangtai(scope.row.id,3)" size="mini">停用广告</el-button>
          <el-button type="text" v-if="scope.row.status==3" size="mini">重新发布</el-button>
      </template>
      </el-table-column>
    </el-table>
      <!-- 分页展示数据-->
      <el-pagination
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination></el-card></el-col></el-row>

    <!--添加弹窗-->
    <el-dialog
        title="编辑广告"
        :visible.sync="dialogVisible"
        width="45%">

      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="260px" class="demo-ruleForm">

        <el-form-item label="编号:" prop="name">
          {{this.ruleForm.id}}
        </el-form-item>

        <el-form-item label="广告类型:">
          <el-select v-model="ruleForm.adType" placeholder="请选择"  clearable>
            <el-option label="启动页广告" value="启动页广告"></el-option>
            <el-option label="首页弹窗广告" value="首页弹窗广告"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="客户端:">
          <el-select v-model="ruleForm.client" placeholder="请选择"  clearable>
            <el-option label="外卖APP" value="外卖APP"></el-option>
            <el-option label="商家APP" value="商家APP"></el-option>
            <el-option label="骑手APP" value="骑手APP"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="通知标题:" prop="name">
          <el-input v-model="ruleForm.adTitle" placeholder="请输入"></el-input>
        </el-form-item>

        <el-form-item label="展示封面:">
          <div style="width: 300px;height: 300px">
            <quill-editor v-model="ruleForm.zsfm" style="width: 300px;height: 100px"></quill-editor>
          </div>
        </el-form-item>

        <el-form-item label="跳转链接:" prop="name">
          <el-input v-model="ruleForm.tzlj" placeholder="请输入"></el-input>
        </el-form-item>

        <el-form-item label="推送频率:" prop="tspl">
          <el-radio-group v-model="ruleForm.tspl">
            <el-radio :label="0">每天首次打开APP时</el-radio>
            <el-radio :label="1">每次打开APP时</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="状态:">
          {{this.ruleForm.status==1?"待发布":(this.ruleForm.status==2?"已发布":"已停用")}}
        </el-form-item>

        <el-form-item label="创建时间:">
          {{this.ruleForm.creationDate}}
        </el-form-item>

        <el-form-item label="修改时间:">
          {{this.ruleForm.effectiveDateStart}}
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="add('ruleForm')" v-text="ruleForm.id==null?'添加':'修改'"></el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!--添加弹窗-->
    <el-dialog
        title="发布广告"
        :visible.sync="dialogVisible2"
        width="45%">

      <el-form :model="ruleForm" ref="ruleForm" label-width="260px" class="demo-ruleForm">

        <el-form-item label="通知类型:">
          <el-select v-model="ruleForm.notificationType" placeholder="请选择"  clearable>
            <el-option label="系统通知" value="系统通知"></el-option>
            <el-option label="活动通知" value="活动通知"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="客户端:">
          <el-select v-model="ruleForm.client" placeholder="请选择"  clearable>
            <el-option label="外卖APP" value="外卖APP"></el-option>
            <el-option label="商家APP" value="商家APP"></el-option>
            <el-option label="骑手APP" value="骑手APP"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="通知标题:" prop="name">
          <el-input v-model="ruleForm.notificationTitle" placeholder="请输入"></el-input>
        </el-form-item>

        <el-form-item label="通知内容:">
          <div style="width: 300px;height: 300px">
            <quill-editor v-model="ruleForm.tznr" style="width: 300px;height: 100px"></quill-editor>
          </div>
        </el-form-item>

        <el-form-item label="跳转链接:" prop="name">
          <el-input v-model="ruleForm.tzlj" placeholder="请输入"></el-input>
        </el-form-item>

        <el-form-item label="展示封面:" prop="sex">
          <el-radio-group v-model="ruleForm.fengmian">
            <el-radio :label="0">无封面</el-radio>
            <el-radio :label="1">单图</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="add('ruleForm')" v-text="ruleForm.id==null?'添加':'修改'"></el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>


<script>
export default {
  data() {
    return {
      dialogVisible:false,
      dialogVisible2:false,
      ruleForm:{},
      formInline:{},
      pageNum:1,
      pageSize:10,
      total:0,
      ads: [],
    };
  },
  methods: {
    findPage() { //查询所有加分页参数
      this.axios.post(`http://localhost:8000/xm-platform/xm-advertisements/findPage?pageNum=${this.pageNum}&pageSize=${this.pageSize}`, this.formInline).then(res => {
        console.log(res.data);
        this.ads = res.data.data.records;
        this.total = res.data.data.total;
      })
    },
    handleCurrentChange(val) {//分页方法
      this.pageNum = val;
      this.findPage();
    },
    toAdd() { //往添加对话框里清空数据
      this.dialogVisible2 = true;
    },
    add(formName) { //添加方法
      this.$refs[formName].validate((valid) => {
        if (valid) {//满足校验
          //通过ajax把数据保存到后端
          // if (this.ruleForm.yxq == "指定日期"){
          //   this.ruleForm.yxq = this.value1[0] + "至" + this.value1[1];
          // }
          this.axios.post(`http://localhost:8000/xm-platform/xm-advertisements/add`, this.ruleForm).then(res => {
            if (res.data.code == 200) {
              this.$message.success("添加成功");
              this.dialogVisible = false;
            } else {
              this.$message.error("添加失败");
            }
            this.dialogVisible = false;
            this.findPage();
          })
        } else {//不满足校验
          console.log('error submit!!');
          return false;
        }
      });
    },
    toUpdate(id) { //修改回显数据方法
      this.axios.get(`http://localhost:8000/xm-platform/xm-advertisements/findById?id=${id}`).then(res => {
        this.ruleForm = res.data.data;
        this.dialogVisible = true;
      })
    },
    zhuangtai(id, status) { //状态修改方法
      this.axios.get(`http://localhost:8000/xm-platform/xm-advertisements/zhuangtai?id=${id}&status=${status}`).then(res => {
        if (res.data.code == 200) {
          this.$message.success(res.data.data);
          this.findPage();
        } else {
          this.$message.error(res.data.data);
        }
      })
    },
  },
  created(){
    this.findPage();
  }
};
</script>

<style scoped>
</style>
